1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import {
Button,
Form,
FormButtons,
FormField,
FormSubmitButton,
ListItem,
Loading,
Select,
Text,
} from '@umami/react-zen';
import { type Key, useState } from 'react';
import {
useLoginQuery,
useMessages,
useUpdateQuery,
useUserTeamsQuery,
useWebsite,
} from '@/components/hooks';
import { ROLES } from '@/lib/constants';
export function WebsiteTransferForm({
websiteId,
onSave,
onClose,
}: {
websiteId: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { user } = useLoginQuery();
const website = useWebsite();
const [teamId, setTeamId] = useState<string>(null);
const { formatMessage, labels, messages, getErrorMessage } = useMessages();
const { mutateAsync, error, isPending } = useUpdateQuery(`/websites/${websiteId}/transfer`);
const { data: teams, isLoading } = useUserTeamsQuery(user.id);
const isTeamWebsite = !!website?.teamId;
const items =
teams?.data?.filter(({ members }) =>
members.some(
({ role, userId }) =>
[ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
),
) || [];
const handleSubmit = async () => {
await mutateAsync(
{
userId: website.teamId ? user.id : undefined,
teamId: website.userId ? teamId : undefined,
},
{
onSuccess: async () => {
onSave?.();
onClose?.();
},
},
);
};
const handleChange = (key: Key) => {
setTeamId(key as string);
};
if (isLoading) {
return <Loading icon="dots" placement="center" />;
}
return (
<Form onSubmit={handleSubmit} error={getErrorMessage(error)} values={{ teamId }}>
<Text>
{formatMessage(
isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
)}
</Text>
<FormField name="teamId">
{!isTeamWebsite && (
<Select onSelectionChange={handleChange} selectedKey={teamId}>
{items.map(({ id, name }) => {
return (
<ListItem key={`${id}`} id={`${id}`}>
{name}
</ListItem>
);
})}
</Select>
)}
</FormField>
<FormButtons>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton
variant="primary"
isPending={isPending}
isDisabled={!isTeamWebsite && !teamId}
>
{formatMessage(labels.transfer)}
</FormSubmitButton>
</FormButtons>
</Form>
);
}
|